<template lang="html">
  <a-layout class="info-page">
    <div class="banner">
      <!-- <img src="@/assets/banner3.png" alt=""> -->
    </div>

    <a-layout-content>
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item @click.native="$router.push({path: '/'})">首页</a-breadcrumb-item>
        <a-breadcrumb-item @click.native="goList">{{$route.query.parentTitle}}</a-breadcrumb-item>
        <a-breadcrumb-item @click.native="goList">{{$route.query.FTitle}}</a-breadcrumb-item>
        <a-breadcrumb-item>正文</a-breadcrumb-item>
      </a-breadcrumb>
      <a-layout>
        <div class="info-wrapper">
          <h1 class="info__title" v-html="dataJson.FTitle"></h1>
          <div class="info__date" v-html="`发布时间: ${dataJson.FUpdateTime}`"></div>
          <a-divider />
          <div class="info-content" v-html="dataJson.FContents">
          </div>
          <div class="info__postman" v-html="`负责编辑: ${dataJson.FEditor}`"></div>
        </div>
      </a-layout>
    </a-layout-content>
  </a-layout>
</template>

<script>
import {invoke} from "@/api";
export default {
  data() {
    return {
      dataJson: {}
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      const vm = this
      invoke(vm.$route.query.url, {
        entityId: vm.$route.query.FId,
        pageCode: vm.$route.query.pageCode
      }).then((res) => {
        vm.dataJson = {}
        vm.dataJson = res.data
      })
    },
    goList() {
      this.$router.push({
        path: '/list-page',
        query: {
          parentTitle: this.$route.query.parentTitle,
          parentURL: this.$route.query.parentURL,
          FTitle: this.$route.query.FTitle,
          url: this.$route.query.listURL,
          pageCode: this.$route.query.listPageCode,
          type: this.dataJson && this.dataJson.FAskingType
        }
      })
    }
  }
}
</script>

<style lang="scss">
.info-page {
  background: rgb(241, 242, 244) !important;

  .banner {
    background-image: url('../assets/banner3.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 230px;
  }

  .ant-breadcrumb {
    transition: all 0.28s ease;

    span:hover {
      color: #0666c8;
      cursor: pointer;
    }
  }

  .info-wrapper {
    width: 1000px;
    padding: 48px 78px;
    background: #FFF;
    position: relative;

    .info__date,
    .info__postman {
      color: #979595;
      font-size: 12px;
    }

    .info-content {
      margin-bottom: 16px;

      img {
        max-width: 100%;
      }
    }
  }
}
</style>
